<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位广告栏</title>
    <style>
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top:300px;
        }
        .left {
            background-color: #f00;
            left:20px;
        }
        .right {
            background-color: #0f0;
            right:20px;
        }
        .top {
            background-color: #0aa1ed;
            width: 100%;
            height: 120px;
            position: fixed;
            top:0;
        }
        p {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur at autem delectus doloribus ea, inventore iure laborum libero magni nesciunt officiis perspiciatis tenetur? Asperiores delectus praesentium quasi rem suscipit.</span><span>Alias, aut corporis eaque hic id incidunt iusto laborum magni, neque non odio odit porro, provident quas qui sunt veritatis. Animi at debitis ex explicabo iste repudiandae sed, sint tempora?</span><span>A accusamus aliquam aliquid animi beatae consectetur culpa doloremque ex exercitationem facere facilis fuga hic in iusto mollitia nemo odit officiis optio qui reiciendis repellat temporibus ullam velit, voluptas voluptatem?</span><span>Architecto asperiores, aut corporis cumque delectus dicta dolor enim est facere illo ipsa ipsum iusto magni minima molestias nisi odit praesentium, provident quae quaerat quas quidem rerum, sit velit voluptate.</span><span>Asperiores, autem deserunt doloremque enim eum explicabo ipsam iure magni molestias, odio porro, repellat reprehenderit repudiandae! Alias aliquam aliquid aspernatur, dolor doloribus eaque fugit in, officia, sit ut veniam vero.</span><span>A assumenda consectetur, dicta, exercitationem fugiat laboriosam laudantium maxime molestiae optio pariatur quam recusandae voluptatem. Cumque eligendi expedita fugit laboriosam perspiciatis? Aliquid animi ea in molestias reiciendis rem sapiente unde!</span><span>Accusamus ad aliquam at consequatur consequuntur culpa deleniti dolorem dolores, ducimus et eveniet explicabo fugiat libero modi molestiae neque odio perferendis possimus quae quia quibusdam quisquam quo suscipit voluptas voluptate.</span><span>Accusamus cum dolores fugit in magnam maxime placeat quos totam velit voluptas. Assumenda cupiditate ducimus eligendi ipsa iure, minus non obcaecati odio placeat quaerat quis quod repudiandae, similique? Ipsum, vero.</span><span>Aspernatur consectetur enim esse in ipsam iure nihil qui, quo temporibus voluptatum! Adipisci eos est fuga molestiae numquam tempore veritatis? Delectus fugiat magnam neque placeat quam ratione similique veniam. Consectetur!</span><span>Amet aperiam architecto assumenda delectus dignissimos distinctio dolore doloribus ea eligendi, eos hic in molestias optio quia tempora voluptate voluptatem? Eos necessitatibus porro possimus quia vel? Magnam odio quaerat veritatis.</span><span>Animi cum dignissimos dolorem, ea et ex ipsum itaque iusto maiores neque odio officia, quae, recusandae tempora totam? Alias consequuntur dolores quam quibusdam reprehenderit! Delectus nemo neque similique sint vero.</span><span>Aliquid animi beatae commodi cumque deserunt dolorum iure sunt? Amet aperiam aut corporis deleniti, dolor eos fugiat nesciunt nihil nisi officia quas quis, rem rerum sit tempore tenetur, unde vitae!</span><span>Alias animi atque deleniti dicta eligendi explicabo maiores minima minus quaerat, quam rem sed voluptas voluptatem. Culpa deleniti dolorum esse facere ipsum, magni non perferendis sit unde! Aperiam, numquam veniam!</span><span>Consectetur enim esse inventore magnam maxime molestias mollitia nostrum, odit omnis perspiciatis porro provident quae quidem ratione, reiciendis, sapiente sequi similique voluptate voluptatibus voluptatum. Alias doloremque eum ipsa molestias provident.</span><span>A assumenda incidunt ipsam ipsum, perspiciatis saepe soluta. Asperiores consequuntur dolor dolorem itaque molestias provident quibusdam sit. Accusamus consequatur corporis, est, eum, excepturi hic iste perspiciatis praesentium sunt suscipit ut.</span><span>Alias asperiores at aut commodi, consequuntur culpa distinctio eaque eius eligendi eos eveniet harum iste libero provident, quibusdam, quo quod vel velit vero vitae. Beatae dicta eaque id nobis saepe.</span><span>Ducimus ea exercitationem expedita, magnam nam non vitae. Architecto consectetur deserunt dicta dolores ducimus est ipsa numquam possimus, quaerat vitae. Dignissimos enim error incidunt iure maiores tempore totam, vero voluptates!</span><span>Aspernatur cumque doloremque, hic iste sequi tempora unde? Accusamus alias assumenda beatae commodi distinctio incidunt laudantium molestiae nam neque nobis non obcaecati odio placeat porro ratione, rerum sit, temporibus totam!</span><span>Est eveniet expedita officia provident quasi voluptas. Distinctio, dolor quaerat. Adipisci, aliquam aperiam atque blanditiis delectus deleniti distinctio ea eaque illo illum laborum modi odio ratione tempore temporibus voluptate, voluptatem!</span><span>A ab accusantium aut consectetur consequatur, dolorum exercitationem ipsa laudantium magni, minus modi neque nisi, omnis perferendis quaerat rerum saepe sapiente ullam voluptas voluptatibus! Dolores ex facere ipsam odit possimus.</span><span>Cupiditate ducimus in molestiae natus. A accusamus, ad aspernatur at consequatur distinctio doloremque error, fugiat illo ipsa maxime perferendis quas quod sequi suscipit tempore voluptatum! Dicta molestiae nihil possimus quis.</span><span>Accusamus autem corporis delectus deserunt, eaque ex exercitationem itaque modi nemo neque nulla provident quis recusandae sunt ullam veritatis vero. Accusantium debitis doloremque eaque earum eos, quam sapiente sed sint!</span><span>Aspernatur delectus dolore doloremque dolores fuga impedit ipsam itaque iure minima minus nesciunt, obcaecati quisquam rem, repellat, repellendus saepe sequi vel. Dolor dolorem error nemo repellat, reprehenderit sit soluta vitae.</span><span>Consectetur doloribus et necessitatibus temporibus! Adipisci amet consequuntur cum delectus dolor dolore dolorem doloremque facilis minus mollitia nemo officiis perspiciatis possimus provident, quas reiciendis repellendus repudiandae sequi sunt, suscipit totam.</span><span>Atque cum doloribus ducimus, ex excepturi molestias neque officia perspiciatis recusandae sed? Alias aliquid beatae consequuntur enim esse, ex fugiat ipsam ipsum maiores nobis officiis repudiandae unde. Eligendi, eum, reprehenderit.</span><span>Ab alias amet assumenda commodi corporis cupiditate delectus ducimus earum excepturi illo iusto laboriosam laborum nobis non nostrum optio perferendis placeat, possimus repellat rerum saepe sapiente sit soluta, ullam voluptatum.</span><span>Corporis deserunt error et, impedit maiores obcaecati omnis perspiciatis provident quisquam reiciendis. Consequatur cumque debitis dolores eligendi error in laborum nulla placeat, rerum suscipit. Aliquam deleniti ea ex inventore suscipit.</span><span>Atque et iste non nulla odit possimus vel vitae voluptatum? Autem dicta dolore ex expedita nulla praesentium quos sit, unde ut voluptates? Aliquam debitis eius ex explicabo sed. Amet, illo.</span><span>Ad alias aliquam asperiores assumenda at beatae consectetur dolorem dolores doloribus earum est eum harum id in iure magni maiores minima necessitatibus, odit omnis perspiciatis porro quae quibusdam vero voluptatum!</span><span>Aliquam commodi deserunt dicta eligendi iste, reprehenderit. Aliquam, cum dolor id illum, incidunt magni molestiae molestias, mollitia odio porro quae reiciendis repudiandae tenetur? Dicta facilis, impedit ipsa magnam similique tempora?</span></p>
</body>
</html>